<template>
	<view class="page">
		<!-- 搜索框 -->
		<view class="headerBox">
			<view class="search-bar">
				<input class="search-input" type="text" placeholder="请输入活动名称" v-model="searchValue"  @confirm="getList" />
			</view>
			<!-- 筛选标签 -->
			<view class="tab-bar">
				<view
					v-for="(item,index) in tabList"
					:key="index"
					:class="['tab-item', activeIndex===index ? 'active' : '']"
					@click="changeTab(index)"
				>
					{{ item }}
				</view>
			</view>
		</view>

		<!-- 活动列表 -->
		<view class="activity-list">
			<view class="activity-card" v-for="(item, index) in list" :key="index" @click="goDeatail(item)">
				
				<view class="title">{{ item.title }}</view>
				<image class="cover" :src="item.cover" mode="aspectFill"></image>
				<view class="card-body">
					<view class="info">
						<view class="row">
							<text class="icon"></text>
							<text>{{ item.address }}</text>
						</view>
						<view class="row">
							<text class="icon"></text>
							<text>{{ item.start_time }}</text>
						</view>
					</view>
					<view :class="['status-btn', item.status == 2 ? 'end' : 'wait']">
						{{ item.status == 2? "已结束": "待参加" }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from "vuex";
	export default {
		data() {
			return {
				searchValue: "",
				activeIndex: 0,
				tabList: ["全部", "待参加", "已结束"],
				list: []
			};
		},
		computed: mapState({
			userInfo: state => state.user.userInfo
		}),
		onShow() {
			this.getList();
		},
		methods: {
			goDeatail(item) { // 前往详情页
				this.$util.goUrl({
					url: `/pages/activity/detail?id=${item.id}`
				})
			},
			changeTab(index) {
				this.activeIndex = index;
				this.getList();
			},
			async getList() {
				let list = await this.$api.activity.getMyList({
					status: this.activeIndex,
					title: this.searchValue
				});
				console.log(list);
				list.map(res => {
					res.startTime = new Date(res.start_time).getTime();
					res.endTime = new Date(res.end_time).getTime();
					res.thenTime = new Date().getTime();
					if (res.endTime < res.thenTime) res.status = 2;
				})
				this.list = list;
			}
		}
	};
</script>

<style scoped>
.page {
	background-color: #F6F6F6;
	min-height: 100vh;
	box-sizing: border-box;
}

.headerBox{
	width: 100%;
	height: 196rpx;
	background: #fff;
	padding-top: 16rpx;
}
/* 搜索框 */
.search-bar {
	background: #f8f8f8;
	width: 702rpx;
	height: 72rpx;
	border-radius: 72rpx;
	position: relative;
	margin: 0 auto;
	overflow: hidden;
}
.search-input {
	width: 702rpx;
	height: 72rpx;
	background: #F5F6F8;
	border-radius: 160rpx;
	padding: 20rpx;
	border-radius: 12rpx;
	font-size: 28rpx;
	box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.05);
	padding-left: 72rpx;
	box-sizing: border-box;
}
.search-bar::placeholder{
	font-size: 24rpx;
}
.search-bar:before{
	content: "";
	width: 32rpx;
	height: 32rpx;
	display: block;
	position: absolute;
	background: url(https://oss.cnyiji.cn/taiqiu/list_search.png) no-repeat;
	background-size: 100% 100%;
	left: 32rpx;
	top: 20rpx;
}
/* 标签栏 */
.tab-bar {
	display: flex;
	background: #fff;
	margin-bottom: 20rpx;
	padding: 24rpx 0 0 24rpx;
}
.tab-item {
	width: 128rpx;
	height: 60rpx;
	text-align: center;
	line-height: 60rpx;
	color: #666;
	font-size: 24rpx;
	border-bottom: 4rpx solid transparent;
	background: url(https://oss.cnyiji.cn/taiqiu/list_itembg.png) no-repeat;
	background-size: 100% 100%;
	color: #9C9C9C;
	margin-right: 24rpx;
}
.tab-item.active {
	color: #fff;
	font-weight: 600;
	background: url(https://oss.cnyiji.cn/taiqiu/list_itemActiveBg.png) no-repeat;
	background-size: 100% 100%;
}

/* 活动卡片 */
.activity-card {
	background: #fff;
	border-radius: 20rpx;
	box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(0,0,0,0.1);
	overflow: hidden;
	width: 702rpx;
	margin: 24rpx auto 0;
}
.cover {
	width: 100%;
	height: 300rpx;
}
.card-body {
	padding: 24rpx;
	position: relative;
}
.title {
	font-size: 32rpx;
	font-weight: 600;
	margin-bottom: 16rpx;
	line-height: 92rpx;
	padding-left: 24rpx;
}
.info .row {
	display: flex;
	align-items: center;
	font-size: 26rpx;
	color: #999;
	margin-bottom: 8rpx;
}
.icon {
	margin-right: 10rpx;
	width: 28rpx;
	height: 28rpx;
	background: url(https://oss.cnyiji.cn/taiqiu/list_address.png);
	background-size: 100% 100%;
}
.info .row:nth-of-type(2) .icon{
	background: url(https://oss.cnyiji.cn/taiqiu/list_time.png);
	background-size: 100% 100%;
}
.status-btn {
	position: absolute;
	right: 24rpx;
	bottom: 32rpx;
	border-radius: 60rpx;
	font-size: 24rpx;
	width: 176rpx;
	height: 60rpx;
	text-align: center;
	line-height: 60rpx;
}
.status-btn.wait {
	background-color: #C4F2E3;
	color: #00C18B;
}
.status-btn.end {
	background-color: #E9E9E9;
	color: #999;
}
</style>
